<!-- 订单详情 -->
<template>
  <s-layout title="订单详情" class="index-wrap" navbar="inner">
		<view
		  class="state-box ss-flex ss-row-center ss-col-center"
		  :style="[
		    {
		      marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
		      paddingTop: Number(statusBarHeight + 88) + 'rpx',
		    },
		  ]"
		>
			<view class="steps-box">
				<view class="steps-item" :class="{active: state.active != 99 && state.active > index}" v-for="(item, index) in options" :key="index">
					<view class="steps-item-link"></view>
					<view class="steps-item-text">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="card info-box">
				<text class="label">系统单号：</text>
				<text class="value">{{ state.orderInfo.order_sn }}</text>
				<text class="copy" @tap="onCopy(state.orderInfo.order_sn)">复制</text>
			</view>
			<view class="card order-box">
				<view class="head-box">
					<view class="brand">
						{{ state.orderInfo.kuaidigs }}
					</view>
					<view class="order">
						运单号：<text class="number">{{ state.orderInfo.jijiancg }}</text>
					</view>
					<view class="copy" @tap="onCopy(state.orderInfo.jijiancg)">
						复制
					</view>
				</view>
				<view class="sending">
					<view class="icon">寄</view>
					<view class="ss-flex-col ss-flex-1">
						<text class="basic">{{ state.orderInfo.fuser }} {{ state.orderInfo.jmobile }}</text>
						<text class="address">{{ state.orderInfo.jaddress }}</text>
					</view>
					<view class="copy" @tap="onCopy(jInfo)">复制</view>
				</view>
				<view class="receiving">
					<view class="icon">收</view>
					<view class="ss-flex-col ss-flex-1">
						<text class="basic">{{ state.orderInfo.suser }} {{ state.orderInfo.smobile }}</text>
						<text class="address">{{ state.orderInfo.saddress }}</text>
					</view>
					<view class="copy" @tap="onCopy(sInfo)">复制</view>
				</view>
			</view>
			<view class="card info-box" v-if="state.orderInfo.kuaidir">
				<text class="label">快递员：</text>
				<text class="value">姓名：{{ state.orderInfo.courierName }} / 电话：{{ state.orderInfo.courierPhone }}</text>
				<text class="cicon-phone-call" @click="callphone(state.orderInfo.courierPhone)"></text>
				<text class="copy" @tap="onCopy(state.orderInfo.courierPhone)">复制</text>
			</view>
			<view class="card info-box" v-if="state.orderInfo.jijianm">
				<text class="label">寄件码：</text>
				<text class="value" style="font-weight: 600;">{{ state.orderInfo.jijianm }}</text>
				<text class="copy" @tap="onCopy(state.orderInfo.jijianm)">复制</text>
				<view class="tips">
					可将寄件码写在包裹上，防止快递员拿错
				</view>
			</view>
			<view class="card information">
				<view class="title">
					寄件信息
				</view>
				<view class="column">
					<uni-row>
						<uni-col :span="12">
							<view class="demo-uni-col">寄件物：{{ state.orderInfo.wupin }}</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col">包裹数：{{ state.orderInfo.shuliang }}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="demo-uni-col">
								预约时间：{{ state.orderInfo.yuyueshjstart }}--{{ state.orderInfo.yuyueshjstop }}
							</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<view class="demo-uni-col">下单重量：{{ state.orderInfo.zhongl }}KG</view>
						</uni-col>
						<uni-col :span="12">
							<view class="demo-uni-col">下单体积：{{ state.orderInfo.tiji }}CM</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="12">
							<view class="demo-uni-col">
								实际体积：-
							</view>
						</uni-col>
						
						<uni-col v-if="state.orderInfo.zhongliang>0" :span="12">
							<view class="demo-uni-col">实际重量：{{ state.orderInfo.zhongliang }}KG</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="column">
					<uni-row>
						<uni-col>
							<view class="demo-uni-col">
								下单时间：{{ state.orderInfo.create_time_text }}
							</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="demo-uni-col red">
								下单金额：¥{{ state.orderInfo.money }}
							</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="demo-uni-col red">
								订单状态：{{ state.active != 99 ? options[state.active - 1] : '已取消' }}
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="card information">
				<view class="title">
					运单轨迹
				</view>
				<view class="column">
					<view class="time-node" v-for="(item, index) in state.guiji" :key="index">
						<!-- <view class="time">
							<view class="dot"></view>
						</view> -->
						<view class="content">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import { isEmpty } from 'lodash';

  const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	
	const state = reactive({
	  orderInfo: {},
		guiji: [],
		active: 0
	});
	const options = ['取件中','运输中','派件中','已签收']
  // 复制
  const onCopy = (text) => {
    sheep.$helper.copyText(text);
  };
	const jInfo = computed(() => {
		return `${state.orderInfo.fuser} ${state.orderInfo.jmobile} ${state.orderInfo.jaddress}`
	})
	const sInfo = computed(() => {
		return `${state.orderInfo.suser} ${state.orderInfo.smobile} ${state.orderInfo.saddress}`
	})
	
	onLoad(async (option) => {
		const { data } = await sheep.$api.order.detailInfo(option.id)
		if (data.guiji && data.guiji.result) {
			state.guiji = data.guiji.result
		}
		state.orderInfo = data
		
		
		state.active = data.status;
		if(data.status==2 && data.paisong==1){
			state.active =3
		}
		if(data.status==3){
			state.active =4
		}
		
	})
	
	function callphone(e){
		uni.makePhoneCall({
			phoneNumber: e //仅为示例
		});
	}
</script>

<style lang="scss" scoped>
  .state-box {
		--color: rgba(255,255,255, 0.9);
    width: 100%;
		height: 340rpx;
    background: linear-gradient(to bottom, #0396ff, #6075f1);
    background-size: 750rpx 100%;
    box-sizing: border-box;
		.steps-box {
			width: 80%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.steps-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 30rpx;
				&.active {
					--color: #42b983;
				}
				&-link {
					position: relative;
					height: 24rpx;
					width: 24rpx;
					border-radius: 50%;
					background-color: var(--color);
					&::after {
						content: '';
						width: 128rpx;
						border-bottom: 2rpx dashed var(--color);
						position: absolute;
						top: 50%;
						left: 140%;
					}
				}
				&:last-child .steps-item-link::after {
					display: none;
				}
				&-text {
					color: var(--color);
				}
			}
		}
  }
	.container {
		--theme-color: #0396ff;
		padding: 20rpx;
		.card:not(:first-child) {
			margin-top: 20rpx;
		}
		.info-box {
			padding: 28rpx;
			.label {
				font-size: 30rpx;
				color: #999999;
			}
			.value {
				font-size: 30rpx;
				color: #000;
			}
			.cicon-phone-call {
				margin: 0 16rpx;
				font-size: 32rpx;
			}
			.tips {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.copy {
			color: var(--theme-color);
			font-size: 28rpx;
			margin-left: 10rpx;
		}
		.order-box {
			.head-box {
				display: flex;
				align-items: center;
				padding: 20rpx;
				font-size: 30rpx;
				column-gap: 20rpx;
				border-bottom: 2rpx solid #eeeeee;
				.brand {
					width: 120rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 34rpx;
					background-color: #ea883f;
					text-align: center;
					color: #fff;
				}
				.order {
					color: #2c2c2c;
					.number {
						color: #ff6600;
					}
				}
			}
			.sending, .receiving {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 0;
				.icon {
					width: 64rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					border-radius: 50%;
					font-size: 32rpx;
					margin: 0 44rpx;
					color: #fff;
				}
				.basic {
					color: #000;
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}
				.address {
					font-size: 28rpx;
					color: #9d9d9d;
				}
				.copy {
					margin: 0 36rpx;
				}
			}
			.sending .icon {
				background-color: #0396ff;
			}
			.receiving .icon {
				background-color: #000000;
			}
		}
		.information {
			padding: 40rpx 30rpx;
			.title {
				margin: 12rpx 0;
			}
			.column {
				color: #999999;
				font-size: 28rpx;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eeeeee;
				:deep(.uni-row) {
					padding: 8rpx 0;
				}
				.time-node {
					margin-bottom: 20rpx;
					.time {
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #000;
						padding: 10rpx 0;
						.dot {
							width: 24rpx;
							height: 24rpx;
							background-color: #000;
							border-radius: 50%;
							margin: 0 10rpx;
						}
					}
					.content {
						line-height: 44rpx;
					}
				}
			}
		}
		.title {
			font-size: 30rpx;
			color: #000;
			font-weight: 600;
		}
		.red {
			color: red;
		}
	}
</style>
